<template>
  <div class="el-row-box">
    <el-row>
      <el-col :span="20"> {{ depart.name }}</el-col>
      <el-col :span="4">
        <el-row class="right-box">
          <el-col :span="12">{{ depart.manager }}</el-col>
          <el-col
            :span="12"
          ><el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="closeD(depart.id)"
              >添加子部门</el-dropdown-item>
              <el-dropdown-item
                v-if="treeFlag"
                @click.native="closeE(depart.id)"
              >编辑部门</el-dropdown-item>
              <el-dropdown-item
                v-if="treeFlag"
                @click.native="delDpt(depart.id)"
              >删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></el-col>
        </el-row></el-col>
    </el-row>
    <!-- 添加框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form v-if="dialogFormVisible" ref="form" :model="form" :rules="rules">
        <el-form-item
          label="部门名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="部门编码"
          :label-width="formLabelWidth"
          prop="code"
        >
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="部门负责人"
          :label-width="formLabelWidth"
          prop="manager"
        >
          <el-select v-model="form.manager" placeholder="请选择">
            <el-option
              v-for="item in manager"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门介绍"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="form.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDpt(depart.id)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addDepartment,
  getDepartManagerApi,
  getDepartById,
  changeDepartById,
  delDepartById
} from '@/api/departments'
export default {
  name: 'Depart',
  props: {
    depart: {
      type: Object,
      default: () => {}
    },
    treeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      title: '',
      flag: true,
      formLabelWidth: '120px',
      manager: [],
      rules: {
        code: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {
    dialogFormVisible(val, newval) {
      if (newval === true) {
        this.$refs.form.resetFields()
      }
    }
  },
  created() {},
  methods: {
    async addDpt(id) {
      this.form.pid = id
      if (this.flag === true) {
        // console.log(22222)
        await addDepartment(this.form)
      } else {
        await changeDepartById(id, this.form)
        // console.log(res, 11111)
      }
      this.dialogFormVisible = false
      this.$store.dispatch('departments/getDptList')
      // this.$nextTick(() => {
      //   console.log(this.$refs.form, 111)
      //   this.$refs.form.resetFields()
      // })
    },
    async closeD() {
      this.title = '添加部门'
      this.flag = true
      this.dialogFormVisible = true

      const res = await getDepartManagerApi()
      this.manager = res.data
    },
    async closeE(id) {
      this.title = '编辑部门'
      this.flag = false
      this.dialogFormVisible = true
      const dd = await getDepartManagerApi()
      this.manager = dd.data
      const res = await getDepartById(id)
      this.form.name = res.data.name
      this.form.code = res.data.code
      this.form.manager = res.data.manager
      this.form.introduce = res.data.introduce
    },
    async delDpt(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delDepartById(id)
          // 确认按钮
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          //  成功后 刷新页面
          this.$store.dispatch('departments/getDptList')
        })
        .catch(() => {
          // 点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row-box {
  flex: 1;
  .el-col-12 {
    height: 26px;
  }
}
.dialog-footer {
  text-align: center;
}
.el-dialog__header {
  background-color: #66b1ff !important;
}
</style>
